<template>
	<div class="deskcalendar">
		<ul v-for="item in roomList">
			<li v-for="ite in hotelInventories" @mouseout="changeClearRoom('','')"  @mouseover="changeClearRoom(item.roomNo,ite.date)" >
			<div class="room-info" v-show="item.roomNo==roomId&&hoteldate==ite.date" >
                    <p class="fn-text-overflow">{{item.roomTypeName}}</p>
                    <p class="fn-text-overflow">{{item.doorNo}}</p>
                    <p class="fn-text-overflow">¥<span class="js-dayPrice">120</span></p>
                </div>
			
			</li>
		</ul>
	
	</div>
</template>
<script>
//	<i class="fa fa-ban fa-3x"></i>
 import { mapGetters ,mapActions} from 'Vuex'
	export default{
		name:"",
		props:['stayInfo','getCloseRoomsList','hotelInventories','roomList'],
		data(){
			return {
				roomId:'',
				hoteldate:''
			}
		},
		methods:{
			changeClearRoom(x,y){
				this.roomId=x;
				this.hoteldate=y
			}
		},
		computed:{

		},
		mounted:function(){

		},
		watch:{

		},
		destroyed:function(){

		},
		components:{

		}
	}
</script>

<style scoped lang="less">
	.deskcalendar{
		ul{
			    height: 61px;
    		border-bottom: 1px solid #e2e2e2;
			li{
				position: relative;
				display: inline-block;
				float: left;
				height: 60px;
				width: 100px;
				border-right: 1px solid #e2e2e2;
				cursor: pointer;
				.room-info{
					    position: absolute;
					top: 2px;
					left: 2px;
					padding: 2px;
					background-color: #a7d6b8;
					border-radius: 4px;
					width: 95px;
					height: 56px;
					filter: alpha(opacity=60);
					-moz-opacity: .6;
					-khtml-opacity: .6;
					opacity: .6;
					p{
						text-align:left;
					}
				}
			}
		}
	}
</style>